import AppDialog from '../app-dialog/AppDialog.vue';

export default {
  title: '西安集贤/对话框',
  component: AppDialog,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、element-plus-icons、tailwindcss、ArkScroll</span> 使用`
      }
    }
  },
  argTypes: {
    visible: {description: '是否可见'},
    beforeClose: {description: '关闭对话框前的回调，返回值为false时可中止关闭'},
    width: {description: '对话框宽度'},
    height: {description: '对话框高度'},
    title: {description: '标题'},
    showMasking: {description: '是否展示底部遮罩层'},
    default: {description: '整个对话框主体部分'},
    'update:visible': {description: '对话框关闭后visible更新事件，参数为更新后的值'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {AppDialog},
    setup() {
      return {args};
    },
    template: `
      <el-button type="primary" @click="args.visible=true">打开对话框</el-button>

      <AppDialog v-bind="args" v-model:visible="args.visible">
        <div style="display: grid;grid-template-columns: repeat(3,1fr);column-gap: 10px;row-gap: 10px">
          <div v-for="item in 11" style="height: 100px;background: gainsboro">{{ item }}</div>
        </div>
      </AppDialog>`,
  }),
  args: {
    visible: false,
    // beforeClose: () => {},
    title: '对话框标题',
    showMasking: false,
  }
};